<template>
  <div class="load">
    <!-- <div class="loadmain" style="margin-bottom: 50px!important;">
      <div class="top">
        <div class="left">
          <span>配送时间</span>
        </div>
        <div class="right">
          <div class="top">
            <el-date-picker
              v-model="getdeliveryStartTime"
              type="date"
              value-format="yyyy-MM-dd "
              placeholder="选择日期"
              :picker-options="pickerOptionsStart"
              size="medium"
              style="width: 150px;"
            >
            </el-date-picker>
          </div>
          <div class="time">
            <div v-for="(itemtime,itemindex) in timelist" :key="itemindex" class="time-itemitem">{{ itemtime.slice(0,4) }}{{ itemtime.slice(7,14) }}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <span>剩余负荷</span>
        </div>
        <div class="right">
          <div v-for="(itemtime,itemindex) in warehouseLoadList" :key="itemindex" class="warehouseLoadList-item">
            {{ itemtime }}
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <span>选择</span>
        </div>
        <div class="right">
          <el-checkbox
            v-for="(itemcheck,itemindex) in checkedlist"
            :key="itemindex"
            v-model="itemcheck.checked"
            @change="handleCheckedCitiesChange(itemindex,itemcheck)"
            :disabled="(itemcheck.num <= 0 ? true : false) || (itemcheck.getHour == true ? true : false) || (disableChecked == true ? !itemcheck.checked : itemcheck.checked)"
            class="warehouseLoadList-item"
          ></el-checkbox>
        </div>
      </div>
    </div> -->
    <table style="margin-bottom: 70px;">
      <tr>
        <td style="width: 7%">日期</td>
        <td :colspan="timelist.length" style="min-width: 65px;">
          <div class="top">
            <el-date-picker
              v-model="getdeliveryStartTime"
              type="date"
              value-format="yyyy-MM-dd "
              placeholder="选择日期"
              :picker-options="pickerOptionsStart"
              size="medium"
              style="width: 150px;"
            >
            </el-date-picker>
          </div>
        </td>
      </tr>
      <tr>
        <td style="width: 7%">配送时间</td>
        <td v-for="(itemtime,itemindex) in timelist" :key="itemindex" style="min-width: 65px;">
          <!-- <div class="time"> -->
            <div class="time-itemitem">{{ itemtime.slice(0,4) }}{{ itemtime.slice(7,14) }}</div>
          <!-- </div> -->
        </td>
      </tr>
      <tr>
        <td style="width: 7%;font-size: 12px">剩余负荷</td>
        <td v-for="(itemtime,itemindex) in warehouseLoadList" :key="itemindex" style="min-width: 65px;">{{ itemtime }}</td>
      </tr>
      <tr>
        <td style="width: 7%">选择</td>
        <td v-for="(itemcheck,itemindex) in checkedlist" :key="itemindex" style="min-width: 65px;">
          <el-checkbox
            v-model="itemcheck.checked"
            @change="handleCheckedCitiesChange(itemindex,itemcheck)"
            :disabled="(itemcheck.num <= 0 ? true : false) || (itemcheck.getHour == true ? true : false) || (disableChecked == true ? !itemcheck.checked : itemcheck.checked)"
            class="warehouseLoadList-item"
          ></el-checkbox>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  // import {
  //   getSurplusWarehouseLoadList
  // } from "@/api/createOrder"
  export default {
    props: {
      timelist: {
        required: true
      },
      warehouseLoadList: {
        required: true
      },
      orderStartEndTime: {
        required: true
      },
      // endTime: {
      //   required: true
      // },
      checkedlist: {
        required: true
      },
      idList: {
        required: true
      },
    },
    data() {
      return {
        nowHours: '',
        nowDateTime: '',
        pickerOptionsStart: {
          disabledDate: time => {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        // checked: true
        deliveryStartTime: '', // 开始时间
        deliveryEndTime: '', // 开始时间
        warehouseLoadId: '',
        getdeliveryStartTime: '',
        checkedCities: '',
        disableChecked: false,
        checkedIndex: '',
        ischecked: [],
        nowDate: '',
        lastdeliveryStartTime: '', // 上一次选择的日期
        lastCheckedFlag: false, // 判断是否胃痛一天的标记
      }
    },
    watch: {
      'getdeliveryStartTime'() {
        this.$emit('getgetSurplusWarehouseLoadList');
        // console.log('getdeliveryStartTime',this.lastdeliveryStartTime,'this.getdeliveryStartTime',this.getdeliveryStartTime)
        if(this.lastdeliveryStartTime !== '' && this.lastdeliveryStartTime !== this.getdeliveryStartTime) {
          this.lastCheckedFlag = true;
          this.ischecked = [];
        } else {
          this.lastCheckedFlag = false;
        }
        this.lastdeliveryStartTime = this.getdeliveryStartTime;
        // console.log('getdeliveryStartTime',this.getdeliveryStartTime)
        // console.log('this.orderStartEndTime',this.orderStartEndTime)
      }
    },
    mounted() {
      this.getNowTime()
    },
    methods: {
      getNowTime() {
        // 判断传入的orderStartEndTime是否为空
        // console.log('234234','this.orderStartEndTime',this.orderStartEndTime,this.orderStartEndTime == '')
        if(this.orderStartEndTime !== null && this.orderStartEndTime !== undefined && this.orderStartEndTime !== 'foundOrder') {
          if(this.orderStartEndTime !== '') {
            // console.log('this.orderStartEndTime',this.orderStartEndTime)
            this.getdeliveryStartTime = this.orderStartEndTime;
          } else if (this.orderStartEndTime == '') {
            this.getorderTime();
          }
        } else if (this.orderStartEndTime === 'foundOrder') {
          this.getorderTime();
        }
      },
      getorderTime() {
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1< 10? "0" + (new Date().getMonth() + 1): (new Date().getMonth() + 1);
        let dd = new Date().getDate() < 10? "0" + new Date().getDate(): new Date().getDate();
        let nowDate = yy + "-" + mm + "-" + dd + ' ';
        this.nowDate = nowDate;
        this.getdeliveryStartTime = nowDate;
      },
      handleCheckedCitiesChange(itemindex) {
        let ischecked = []
        this.ischecked = []
        this.checkedlist.forEach((item,index) => {
          ischecked.push(item.checked)
          this.ischecked.push(item.checked)
          if(item.checked == true) {
            // console.log('index',index)
            this.checkedIndex = index
          }
        })
        if(ischecked.indexOf(true) > -1) {
          this.disableChecked = true
        } else {
          this.disableChecked = false
        }
        // console.log('this.timelist',this.getdeliveryStartTime)
        this.deliveryStartTime = this.timelist[itemindex].slice(0,8)
        this.deliveryEndTime = this.timelist[itemindex].slice(9,17)
        this.warehouseLoadId = this.idList[itemindex]
      }
    }
  }
</script>

<style lang="scss">
  ul>li {
    list-style: none;
  }
  .load {
    // .loadmain {
    //   border: 1px solid #ccc;
    //   margin-bottom: 50px;
    //   .top {
    //     display: flex;
    //     width: 100%;

    //     .left {
    //       line-height: 80px;
    //       width: 10%;
    //       border-right: 1px solid #ccc;
    //       text-align: center;
    //     }

    //     .right {
    //       width: 90%;
    //       .top {
    //         border-bottom: 1px solid #ccc;
    //         line-height: 40px;
    //         text-align: center;
    //         margin: 0 auto;
    //         display: block;

    //         .timetab {
    //           display: inline-block;
    //           cursor: pointer;
    //           font-size: 18px
    //         }
    //       }

    //       .time {
    //         display: flex;

    //         .time-itemitem {
    //           width: 135px;
    //           border-right: 1px solid #ccc;
    //           min-height: 50px;
    //           text-align: center;
    //           font-size: 13px;
    //           box-sizing: border-box;
    //           padding-top: 5px;
    //           line-height: 30px;
    //         }

    //         &:after {
    //           border: none !important
    //         }
    //       }

    //     }
    //   }
    //   .bottom {
    //     border-top: 1px solid #ccc;
    //     border-right: 1px solid #ccc;
    //     display: flex;
    //     width: 100%;

    //     .left {
    //       line-height: 40px;
    //       width: 10%;
    //       text-align: center;
    //       border-right: 1px solid #ccc;
    //     }

    //     .right {
    //       width: 90%;
    //       display: flex;

    //       .warehouseLoadList-item {
    //         width: 130px;
    //         border-right: 1px solid #ccc;
    //         height: 40px;
    //         line-height: 40px;
    //         text-align: center;
    //         padding: 0 5px;
    //         box-sizing: border-box;
    //       }
          
    //       .el-checkbox {
    //         margin-right: 0px;
    //       }
    //     }
    //   }
    // }
    table {
      border-top: 1px solid rgb(223, 228, 237);
      border-left: 1px solid rgb(223, 228, 237);
      border-collapse: collapse;
      text-align: center;
    }
    table tr {
      border: 1px solid rgb(223, 228, 237);
    }
    table tr td {
      min-width: 5%;
      border: 1px solid rgb(223, 228, 237);
      padding: 5px 5px;
      height: 50px;
      line-height: 12px;
    }
  }
</style>
